<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 30px;
            background: red;
            margin: 300px auto 10px;
        }
        .div2{
            width: 100px;
            height: 100px;
            margin: 10px auto;
            text-align: center;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

        <!--
             v-on: 可以监听页面上的事件, 然后监听到之后, 把方法触发到对应Vue对象中
        -->

    <div id="root">

        <div class="div1">
            {{userName}}
        </div>
        <div class="div2">
            <!--<button onclick="getname()">点名</button>-->
            <!--  通过V-on监听事件, 触发方法到对应的vue对象中, 如果不需要传参, 就不要加括号 ;
                            如果需要传参, 就加括号 -->
            <button v-on:click="getname">点名</button>
        </div>

    </div>
    <script>
        new Vue({
            el: "#root",
            data: { // 自定义参数的位置
                userName: "zs"
            },
            methods: { // methods: 属于Vue对象的固有属性, 用来自定义方法的位置

                // 在Vue中的methods中, 自定义一个方法的写法:
                //    方法名: function (参数) { 方法体 }
                getname: function () {
                    // alert("Vue内部的方法" )
                    this.userName  = "ls"
                }
            }
        })


        function getname() {
            alert(123)
        }
    </script>



</body>
</html>
